<template>
  <transition name="fade">
    <div
      class="playlist-wrapper"
      v-show="showPlaylist"
      @click="hide"
      >
      <div class="playlist" @click.stop>
        <div class="title">
          <i
            class="play-mode-icon"
            :class="iconMode"
            @click="handleModeChange"
            ></i>
          <div class="text">{{modeText}}</div>
          <i class="icon-clear" @click="showConfirm"></i>
        </div>
        <scroll
          class="scroll"
          :data="sequenceList"
          :refreshDelay="300"
          ref="scroll"
          >
          <transition-group name="list" tag="ul" class="list">
            <li
              v-for="(item, index) in sequenceList"
              :key="item.rid"
              @click="selectItem(item, index)"
              ref="listItem"
              >
              <i class="playing-btn" :class="playClass(item)"></i>
              <div class="song">{{item.name}}</div>
              <!-- 收藏按钮 -->
              <i
                class="favorite-btn"
                :class="getFavoriteIcon(item)"
                @click.stop="toggleFavorite(item)"
                ></i>
              <i
                class="icon-delete"
                @click.stop="deleteOne(item)"></i>
            </li>
          </transition-group>
        </scroll>
        <div class="addBtn" @click="addSong">
          <i class="icon-add"></i>
          <span>添加歌曲到队列</span>
        </div>
      </div>
      <div class="bottom" @click="hide">关闭</div>
      <confirm
        ref="confirm"
        text="是否清空播放列表？"
        okBtn="清空"
        @ok="confirmClear"
        ></confirm>
      <add-song ref="addSong"></add-song>
    </div>
  </transition>
</template>

<script>
import { mapActions } from 'vuex'
import { playMode } from 'common/js/config'
import { playerMixin } from 'common/js/mixin'
import Scroll from 'base/scroll/scroll'
import Confirm from 'base/confirm/confirm'
import AddSong from 'components/add-song/add-song'

export default {
  name: 'playlist',
  mixins: [playerMixin],
  components: {
    Scroll,
    Confirm,
    AddSong
  },
  data () {
    return {
      showPlaylist: false
    }
  },
  computed: {
    modeText () {
      if (this.mode === playMode.sequence) {
        return '顺序播放'
      } else if (this.mode === playMode.loop) {
        return '单曲循环'
      } else {
        return '随机播放'
      }
    }
  },
  methods: {
    show () {
      this.showPlaylist = true
      setTimeout(() => {
        this.$refs.scroll.refresh()
        this.scrollToCurrent(this.currentSong)
      }, 20)
    },
    hide () {
      this.showPlaylist = false
    },
    playClass (item) {
      if (item.rid === this.currentSong.rid) {
        return 'icon-play'
      } else {
        return ''
      }
    },
    selectItem (item, index) {
      // 随机播放情况下，index 与 currentIndex 就不对应，需要重新设置
      if (this.mode === playMode.random) {
        // 随机播放模式下
        index = this.playlist.findIndex((song) => {
          return song.rid === item.rid
        })
      }
      // 顺序播放、单曲循环情况下，index 就对应 currentIndex，直接设置
      this.setCurrentIndex(index)

      this.setPlayingState(true)
    },
    scrollToCurrent (current) {
      const index = this.sequenceList.findIndex((song) => {
        return current.rid === song.rid
      })
      // 滚动到 li 的位置，并带有 300ms 动画
      this.$refs.scroll.scrollToEl(this.$refs.listItem[index], 300)
    },
    deleteOne (item) {
      this.deleteSong(item)

      // 当 playlist 为空时，将 playlist 组件隐藏掉
      if (!this.playlist.length) {
        this.hide()
      }
    },
    showConfirm () {
      this.$refs.confirm.show()
    },
    confirmClear () {
      // 将整个播放列表清空
      this.deleteSongList()
      this.hide() // 隐藏列表
    },
    addSong () {
      this.$refs.addSong.show()
    },
    ...mapActions([
      'deleteSong',
      'deleteSongList'
    ])
  },
  watch: {
    currentSong (newSong, oldSong) {
      // 如果不显示或者 newSong 等于 oldSong，则什么都不做
      if (!this.showPlaylist || newSong.rid === oldSong.rid) {
        return
      }
      this.scrollToCurrent(newSong)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  .playlist-wrapper {
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: 1000
    background: $color-background-d
    .playlist {
      display: flex
      flex-direction: column
      position: absolute
      right: 0
      bottom: 60px
      left: 0
      padding: 0 20px
      background: $color-highlight-background
      .title {
        display: flex
        line-height: 72px
        .play-mode-icon {
          color: $color-theme
          font-size: 28px
          align-self: center
        }
        .text {
          flex: 1
          margin-left: 10px
          color: $color-text-l
          font-size: $font-size-medium
        }
        .icon-clear {
          align-self: center
          color: $color-text-d
        }
      }
      .list {
        font-size: $font-size-medium
        color: $color-theme
        li {
          display: flex
          height: 42px
          line-height: 42px
          &.list-enter, &.list-leave-to {
            opacity: 0
            height: 0
          }
          &.list-enter-active, &.list-leave-active {
            transition: all .3s
          }
          .song {
            flex: 1
            margin-left: 6px
            color: $color-text-l
          }
          i {
            align-self: center
          }
          .favorite-btn {
            margin-right: 12px
            &.icon-favorite {
              color: $color-sub-theme
            }
          }
          .playing-btn {
            width: 14px
            height: 14px
          }
        }
      }
      .addBtn {
        display: inline-block
        border: 1px solid $color-text-l
        padding: 8px 16px
        border-radius: 14px
        font-size: $font-size-small
        color: $color-text-l
        margin: 30px auto
        .icon-add {
          margin-right: 6px
        }
      }
    }
    .bottom {
      position: absolute
      bottom: 0
      width: 100%
      text-align: center
      height: 60px
      line-height: 60px
      background: $color-background
      color: $color-text-l
    }
  }

  .fade-enter, .fade-leave-to {
    opacity: 0
    .playlist {
      transform: translate3d(0, 100%, 0)
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: all .4s
    .playlist {
      transition: all .3s
    }
  }

  .scroll {
    overflow: hidden
    position: relative
    top: 0
    left: 0
    right: 0
    bottom: 0
    max-height: 252px
  }
</style>
